<template>
  <view class="min-popup" v-if="show" :class="[isShow ? 'min-show' : 'min-hide']">
    <view class="min-overlay"></view>
    <view :class="size ?  'min-content-'+size : 'min-content'">
      <slot/>
	  <!-- 内容 -->
	  <view class="close"  @click="close">
	  	<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/detail/shanchu.png"></image>
	  </view>
	  <view class="goods_detail_wrap">
	  	<view class="goods_detail_left">
	  		<image :src="goods_shuxing.goods_img"></image>
	  	</view>
		<view class="goods_detail_right">
			<view class="goods_price_num"><text>￥</text>{{goods_shuxing.goods_price}}</view>
			<view class="kucun">库存{{goods_shuxing.goods_num}}件</view>
		</view>
	  </view>
	  <!-- 颜色分类 -->
	  <view class="color_cate">
	  	<view class="color_title">颜色分类</view>
		<view class="cate_color">
			<view :class="currentIndex1 == index?'cate_active':'cate_item'" @click="chooseProps(index)" v-for="(item,index) in goods_shuxing.color_cate" :key="index">
				<view class="item_con">{{item.cate_name}}</view>
			</view>
		</view>
	  </view>
	  
	  <!-- 购买数量 -->
	  <view class="buy_num">
	  	<view class="buy_title">购买数量</view>
		<view class="buy_right">
			<view class="num_wrap">
				<view class="num">-</view>
				<view class="num">0</view>
				<view class="num">+</view>
			</view>
		</view>
	  </view>
	  
	  <!-- 加入购物车 -->
	  <view class="button_wrap">
	  	<view class="btn_box">
	  		<view class="btn_left">
	  			<view class="btn" @click="toCart">
	  				加入购物车
	  			</view>
	  		</view>
	  		<view class="btn_right" @click="toPayOrder">
	  			<view class="btn">
	  				立即购买
	  			</view>
	  		</view>
	  	</view>
	  </view>
	  
    </view>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean
    },
    size: {
      type: String
    }
  },
  data () {
    return {
      isShow: Boolean,
	  currentIndex1:0,
	  goods_shuxing:{
			  goods_img:'../../static/detail/tu3.png',
			  goods_price:'39-88',
			  goods_num:'605',
			  color_cate:[
				  {
					  cate_name:'蓝 主扫被扫'
				  },{
					  cate_name:'蓝个人升级版'
				  }
			  ]
		  }
    }
  },
  created () {
    this.isShow = this.show
  },
  watch: {
    show () {
      this.isShow = this.show
      if (!this.show) {
        this.close()
      }
    }
  },
  methods: {
	  toPayOrder(){
	  	uni.navigateTo({
	  		url:'/pages/payOrder/payOrder'
	  	})
	  },
    close () {
      this.isShow = false
      setTimeout(() => {
        this.$emit('close')
      }, 200)
    },
	chooseProps(index){
		this.currentIndex1 = index;
	},
	toCart(){
		uni.navigateTo({
			url:'../../pages/cart/cart'
		})
	}
  }
}

</script>

<style lang="scss" scoped>
.min-popup{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top:0;
  left: 0;
  z-index: 100;
  &.min-hide{
    .min-content{
      animation: hide .5s linear forwards;
    }
    .min-overlay{
      opacity: 0;
    }
  }
  &.min-show{
    .min-content{
      animation: show .5s linear forwards;
    }
    .min-overlay{
      opacity: 1;
    }
  }
  .min-overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 200;
    transition: .5s;
  }
  .close{
	  width: 90%;
	  margin: 0 auto;
	  text-align: right;margin-top: 20upx;
	  image{
		  width: 60upx;
		  height: 60upx;
	  }
  }
  .goods_detail_wrap{
	width: 90%;
	margin: 0 auto;
	display: flex;
	// align-items: center;
	.goods_detail_left{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 189upx;
			height: 188upx;
			border-radius: 20upx;
		}
	}
	.goods_detail_right{
		flex: 1;
		.goods_price_num{
			font-size: 46upx;
			color: #d10909;
			text{
				font-size: 26upx;
			}
		}
		.kucun{
			font-size: 20upx;
			color: #838383;
			padding: 20upx 0;
		}
	}
  }
  .color_cate{
	  width: 80%;
	  margin: 0 auto;
	  margin-top: 40upx;
	.color_title{
		font-size: 34upx;
	}
	.cate_color{
		display: flex;
		flex-wrap: wrap;
		padding: 20upx 0;
		border-bottom: 2upx solid #f4f4f4;
		.cate_item{
			height: 70upx;
			background-color: #f7f7f6;
			margin-right: 10upx;
			margin-top: 15upx;
			padding: 10upx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10upx;
			.item_con{
				
			}
		}
		.cate_active{
			height: 70upx;
			border: 2upx solid #a28247;
			background: #ffffff;
			margin-right: 10upx;
			margin-top: 15upx;
			padding: 10upx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10upx;
			.item_con{
				
			}
		}
	}
  }
  
  .buy_num{
	  width: 80%;
	  margin: 0 auto;
	  padding: 20upx 0;
	  border-bottom: 2upx solid #f4f4f4;
	  display: flex;
	  align-items: center;
	  .buy_title{
		flex: 1;
		font-size: 34upx;
	  }
	  .buy_right{
		  flex: 1;
		  .num_wrap{
			  flex: 1;
			  display: flex;
			  align-items: center;
			 justify-content: flex-end;
			  .num{
				 width: 50upx; 
				 height: 40upx;
				 background: #f2f2f2;
				 margin-right: 10upx;
				 display: flex;
				 align-items: center;
				 justify-content: center;
			  }
		  }
	  }
  }
  
  .button_wrap{
	    position: fixed;
		bottom: 40upx;
		left: 50%;
		transform: translateX(-50%);
  		width: 70%;
  		display: flex;
  		align-items: center;
  		justify-content: center;
  		.btn_box{
  			width: 90%;
  			margin: 0 auto;
  			display: flex;
  			align-items: center;
  			justify-content: center;
  			height: 80upx;
  			.btn_left{
  				flex: 1;
  				.btn{
  					width: 100%;
  					height: 80upx;
  					display: flex;
  					align-items: center;
  					justify-content: center;
  					font-size: 34upx;
  					border-radius: 40upx 0 0 40upx;
  					background-image: linear-gradient(top,#f1e0b6,#a28247);
  				}
  			}
  			.btn_right{
  				flex: 1;
  				.btn{
  					width: 100%;
  					height: 80upx;
  					display: flex;
  					align-items: center;
  					justify-content: center;
  					font-size: 34upx;
  					color: #ffffff;
  					border-radius: 0 40upx 40upx 0;
  					background-image: linear-gradient(top,#e74b59,#ac1327);
  				}
  			}
  		}
  	}
  .min-content{
    width: 100%;
    height:1100rpx;
    background: #fff;
	border-radius: 40upx 40upx 0 0;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 300;
    overflow: hidden;
  }
  .min-content-height{
    width: 100%;
    height:600rpx;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 300;
    overflow: hidden;
  }
  @keyframes hide {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(100%);
    }
  }
  @keyframes show {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0);
    }
  }
}
</style>
